<template>
    <div class="indexContainer">
        <a href="#" name="ding"></a>
        <div class="headerContainer">
            <div class="icon" href="">
                <img src="https://rs.dance365.com/logo@3xrenew3.png" alt="">
            </div>
            <nav class="nav_list">
                <span v-for="(item,index) in routerArr" :key="index" @click="changeRouter(index)"
                    :class="num===index?'active':''" class="span_list">{{item}}</span>
            </nav>
            <div class="right">
                <span><svg t="1666353762421" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7099" width="16" height="16">
                        <path
                            d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                            p-id="7100" fill="#111111"></path>
                    </svg>下载APP</span>
                <button>+ 发布</button>
                <el-popconfirm :icon="InfoFilled"
                    icon-color="#626AEF" title="您确定退出登录吗？" @confirm="logout">
                    <template #reference>
                        <img  v-if="centerStore.userInfo.account" :src="centerStore.userInfo.avatar" alt="">
                    </template>
                </el-popconfirm>
                <!-- <img @click="logout" v-if="centerStore.userInfo.account" :src="centerStore.userInfo.avatar" alt=""> -->
                <div v-if="!centerStore.userInfo.account">
                    <router-link to="/login" class="loginActive">登录</router-link>
                </div>
            </div>
        </div>
    </div>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import useCenterStore from '../../stores/center'
import { ElMessage } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue'

// 定义仓库
let centerStore = useCenterStore()
const router = useRouter()
const route = useRoute()
let routerArr = ref(['资源', '课程', '练习室', '交流', '我的'])
let num = ref(0)
const changeRouter = (index: number) => {
    num.value = index
    if (index === 0) {
        router.push({ path: '/index' })
    } else if (index === 1) {
        router.push({ path: '/discovery' })
    } else if (index === 2) {
        router.push({ path: '/training' })
    } else if (index === 3) {
        router.push({ path: '/communication' })
    } else if (index === 4) {
        router.push({ path: '/center' })
    }
}
onMounted(() => {
    if (route.name === 'Recommend') {
        num.value = 0
    } else if (route.name === 'Discovery') {
        num.value = 1
    } else if (route.name === 'Training') {
        num.value = 2
    } else if (route.name === 'Communication') {
        num.value = 3
    } else if (route.name === 'Center') {
        num.value = 4
    }
})
// 退出登录
const logout = () => {
    // if(confirm('您确定退出登录吗？')){
        centerStore.userInfo = {};
        centerStore.token = "";
        localStorage.removeItem('token')
        ElMessage({
            type:'success',
            message:'用户退出成功'
        })
    // }

}
</script>

<style scoped>
.indexContainer {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: 4px 0 9px #c1c1c1;
    z-index: 99;
}

.headerContainer {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;

}

.icon {
    width: 158px;
    margin-right: 30px;
    display: flex;
    align-items: center;
}

.icon img {
    width: 158px;
    height: 30px;
}

.nav_list {
    width: 458px;
    /* background: #bfa; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav_list .active {
    color: #f93684;
}

.span_list:hover {
    color: #f93684;
    cursor: pointer;
}

.right {
    position: absolute;
    right: 0;
    width: 210px;
    height: 100%;
    /* background: #bff; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.right .icon {
    position: absolute;
    left: -88px;
    top: 24px;
}

.right button {
    border-radius: 15px;
    width: 75px;
    height: 30px;
    color: #fff;
    background-color: #f93684;
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    border: none;
}

.loginActive:hover {
    color: #f93684;
}
</style>